<template>
  <view class="registrations-page">
    <view class="header">
      <view class="back-btn" @tap="goBack">
        <text>&lt;</text>
      </view>
      <text class="page-title">公益活动报名</text>
    </view>
    
    <view class="content">
      <view v-if="registrations.length === 0" class="empty-state">
        <image class="empty-image" src="../../../static/empty.png" mode="aspectFit"></image>
        <text class="empty-text">暂无公益活动报名记录</text>
        <view class="action-btn" @tap="goToCharityEvents">
          <text>去参加公益活动</text>
        </view>
      </view>
      
      <view v-else class="registrations-list">
        <view 
          class="registration-item" 
          v-for="(item, index) in registrations" 
          :key="index"
        >
          <view class="item-header">
            <text class="event-name">{{ item.eventName }}</text>
            <text :class="['status-tag', getStatusClass(item.status)]">{{ getStatusText(item.status) }}</text>
          </view>
          
          <view class="item-info">
            <view class="info-row">
              <text class="info-label">活动时间：</text>
              <text class="info-value">{{ item.eventTime }}</text>
            </view>
            <view class="info-row">
              <text class="info-label">活动地点：</text>
              <text class="info-value">{{ item.address }}</text>
            </view>
            <view class="info-row">
              <text class="info-label">报名人：</text>
              <text class="info-value">{{ item.participant }}</text>
            </view>
            <view class="info-row">
              <text class="info-label">联系电话：</text>
              <text class="info-value">{{ item.phone }}</text>
            </view>
            <view class="info-row" v-if="item.residentName">
              <text class="info-label">入住人：</text>
              <text class="info-value">{{ item.residentName }}</text>
            </view>
            <view class="info-row" v-if="item.remark">
              <text class="info-label">备注：</text>
              <text class="info-value">{{ item.remark }}</text>
            </view>
          </view>
          
          <view class="item-actions">
            <view class="action-btn primary" @tap="viewEventDetail(item.eventId)">
              <text>查看活动</text>
            </view>
            <view 
              class="action-btn" 
              @tap="cancelRegistration(item.eventId, item.residentId)" 
              v-if="item.status === 'pending'"
            >
              <text>取消报名</text>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue';

// 报名记录列表
const registrations = ref([
  {
    id: 1,
    eventId: 401,
    eventName: '敬老爱老志愿者活动',
    eventTime: '2023-09-15 09:30',
    address: '北京市海淀区敬老院',
    participant: '张三',
    phone: '13812345678',
    residentId: 1,
    residentName: '张大爷',
    remark: '可以参与组织游戏环节',
    status: 'completed'
  },
  {
    id: 2,
    eventId: 402,
    eventName: '社区环保宣传活动',
    eventTime: '2023-10-20 14:00',
    address: '北京市朝阳区社区中心',
    participant: '张三',
    phone: '13812345678',
    residentId: 2,
    residentName: '李奶奶',
    remark: '',
    status: 'pending'
  }
]);

// 页面加载时执行
onMounted(() => {
  // 实际应用时，这里应该从API加载报名记录
  loadRegistrations();
});

// 加载报名记录
const loadRegistrations = () => {
  // 这里应该调用API获取报名记录
  console.log('加载公益活动报名记录');
  
  // 模拟加载后的数据已预设在registrations中
};

// 获取状态文本
const getStatusText = (status) => {
  const statusMap = {
    'pending': '待参加',
    'completed': '已完成',
    'canceled': '已取消'
  };
  return statusMap[status] || status;
};

// 获取状态对应的样式类名
const getStatusClass = (status) => {
  const statusClassMap = {
    'pending': 'status-pending',
    'completed': 'status-completed',
    'canceled': 'status-canceled'
  };
  return statusClassMap[status] || '';
};

// 查看活动详情
const viewEventDetail = (id) => {
  uni.navigateTo({
    url: `/pages/charity-detail/index?id=${id}`
  });
};

// 取消报名
const cancelRegistration = (eventId, residentId) => {
  uni.showModal({
    title: '提示',
    content: '确定要取消此次报名吗？',
    success: (res) => {
      if (res.confirm) {
        try {
          // 从本地存储中删除该入住人的活动报名记录
          let registeredResidentsMap = uni.getStorageSync('registeredResidentsMap') || {};
          const activityRegistrations = registeredResidentsMap[Number(eventId)] || [];
          
          // 查找入住人在数组中的位置并移除
          const index = activityRegistrations.indexOf(Number(residentId));
          if (index > -1) {
            activityRegistrations.splice(index, 1);
            registeredResidentsMap[Number(eventId)] = activityRegistrations;
            uni.setStorageSync('registeredResidentsMap', registeredResidentsMap);
            
            console.log('取消报名成功:', eventId, residentId);
          }
          
          // 更新列表状态
          const regIndex = registrations.value.findIndex(item => 
            item.eventId === eventId && item.residentId === residentId
          );
          
          if (regIndex !== -1) {
            registrations.value[regIndex].status = 'canceled';
          }
          
          uni.showToast({
            title: '已取消报名',
            icon: 'success'
          });
        } catch(e) {
          console.error('取消报名失败', e);
          uni.showToast({
            title: '操作失败，请重试',
            icon: 'none'
          });
        }
      }
    }
  });
};

// 刷新报名记录
const refreshRegistrations = () => {
  console.log('刷新报名记录');
  loadRegistrations();
};

// 前往活动列表
const goToCharityEvents = () => {
  uni.switchTab({
    url: '/pages/index/index'
  });
};

// 返回上一页
const goBack = () => {
  uni.navigateBack({
    delta: 1
  });
};
</script>

<style lang="scss">
.registrations-page {
  min-height: 100vh;
  background-color: #f5f5f5;
  
  .header {
    display: flex;
    align-items: center;
    padding: 15px;
    background-color: #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
    
    .back-btn {
      width: 30px;
      height: 30px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 10px;
      z-index: 10;
      
      text {
        font-size: 24px;
        font-weight: bold;
        color: #2c7873;
      }
    }
    
    .page-title {
      font-size: 18px;
      font-weight: 600;
      color: #2c7873;
    }
  }
  
  .content {
    padding: 15px;
    
    .empty-state {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 30px;
      background-color: #fff;
      border-radius: 12px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
      
      .empty-image {
        width: 120px;
        height: 120px;
        margin-bottom: 15px;
      }
      
      .empty-text {
        font-size: 16px;
        color: #999;
        margin-bottom: 20px;
      }
      
      .action-btn {
        background-color: #2c7873;
        color: #fff;
        padding: 10px 20px;
        border-radius: 20px;
        font-size: 14px;
        box-shadow: 0 2px 8px rgba(44, 120, 115, 0.2);
        
        &:active {
          transform: scale(0.98);
        }
      }
    }
    
    .registrations-list {
      .registration-item {
        background-color: #fff;
        border-radius: 12px;
        padding: 15px;
        margin-bottom: 15px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
        
        .item-header {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 15px;
          
          .event-name {
            font-size: 16px;
            font-weight: 600;
            color: #333;
          }
          
          .status-tag {
            padding: 4px 8px;
            border-radius: 4px;
            font-size: 12px;
            
            &.status-pending {
              background-color: #ffe0b2;
              color: #e65100;
            }
            
            &.status-completed {
              background-color: #c8e6c9;
              color: #2e7d32;
            }
            
            &.status-canceled {
              background-color: #ffcdd2;
              color: #c62828;
            }
          }
        }
        
        .item-info {
          margin-bottom: 15px;
          
          .info-row {
            display: flex;
            margin-bottom: 8px;
            
            &:last-child {
              margin-bottom: 0;
            }
            
            .info-label {
              width: 80px;
              font-size: 14px;
              color: #666;
              flex-shrink: 0;
            }
            
            .info-value {
              flex: 1;
              font-size: 14px;
              color: #333;
            }
          }
        }
        
        .item-actions {
          display: flex;
          justify-content: flex-end;
          
          .action-btn {
            padding: 8px 15px;
            border-radius: 4px;
            font-size: 14px;
            margin-left: 10px;
            background-color: #f5f5f5;
            color: #666;
            
            &.primary {
              background-color: #2c7873;
              color: #fff;
            }
            
            &:active {
              opacity: 0.8;
            }
          }
        }
      }
    }
  }
}
</style> 